<template>
    <div class="activity">
        <div class="tabBar">
            <TabBar :tabs="tabs" :index="tabIndex" :on-tap="onTap"></TabBar>
        </div>

        <div style="flex-grow: 1">
            <MyActivityList :list="list"></MyActivityList>
        </div>
    </div>
</template>

<script lang="ts" setup>
import request from '@/utils/request'
import { defineComponent, reactive, ref } from 'vue'
import { useStore } from 'vuex'
import TabBar from '@/components/tab/tab-bar.vue'
// import MyActivityCard from '@/views/activityPages/components/my-activity-card.vue'
import MyActivityList from '@/views/activityPages/components/my-activity-list.vue'

const tabIndex = ref(0)
const tabs = ['全部', '待参加', '待支付', '已完成', '退款/售后']
function onTap(i) {
    tabIndex.value = i
}
const list = [
    {
        image: 'https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg',
        title: '安徽路上看到记录卡记录卡大家',
        time: '2023-09-06',
        location: '成都文旅大厦',
        status: '进行中'
    },
    {
        image: 'https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg',
        title: '安徽路上看到记录卡记录卡大家',
        time: '2023-09-06',
        location: '成都文旅大厦',
        status: '进行中'
    },
    {
        image: 'https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg',
        title: '安徽路上看到记录卡记录卡大家',
        time: '2023-09-06',
        location: '成都文旅大厦',
        status: '进行中'
    },
    {
        image: 'https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg',
        title: '安徽路上看到记录卡记录卡大家',
        time: '2023-09-06',
        location: '成都文旅大厦',
        status: '进行中'
    },
    {
        image: 'https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg',
        title: '安徽路上看到记录卡记录卡大家',
        time: '2023-09-06',
        location: '成都文旅大厦',
        status: '进行中'
    },
    {
        image: 'https://img.zcool.cn/community/012e285a1ea496a8012171323c6bf1.jpg@3000w_1l_0o_100sh.jpg',
        title: '安徽路上看到记录卡记录卡大家',
        time: '2023-09-06',
        location: '成都文旅大厦',
        status: '进行中'
    }
]
</script>
<style lang="scss" scoped>
.activity {
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
    .tabBar {
        position: -webkit-sticky;
        position: sticky;
        top: var(--window-top);
        z-index: 99;
        padding: 10px;
        background-color: #f8f8f8;
    }
}
</style>
